<template>
  <div class="main house">
     <div class="title">
        <h1>{{productDetail.name}}</h1>
        <p>{{productDetail.summary}}</p>
     </div>
     <div class="detail">

        <div class="detailleft">
          <div class="mianimg">
            <el-carousel height="400px">
              <el-carousel-item v-for="item in productDetail.pics" :key="item">
                  <img :src="item" alt="">
              </el-carousel-item>
            </el-carousel>
          </div>
          <img class="liuchengtu" src="http://img3.tqcaifu.com/img/houseliuceng2.jpg" alt="">
        </div>
        <div class="detailright">
          <div class="price1">
            ￥{{productDetail.price}}万
          </div>
          <div class="price2 box">
            <div>
              <h2>{{productDetail.yearRent}}%</h2>
              <p>年均租金</p>
            </div>
            <div>
              <h2>{{productDetail.yearIncreaseRate}}%</h2>
              <p>近一年房价涨幅</p>
            </div>
            <div>
              <h2>{{productDetail.firstPay}}%</h2>
              <p> 首付</p>
            </div>
          </div>
          <div class="detailmsg1 box">
              <div>
                  <p>
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-17"></use>
                        </svg>
                        <span>{{productDetail.roomType}}</span>
                  </p>
                  <p>
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-zhuangxiugongcheng01"></use>
                        </svg>
                        <span>{{productDetail.decoration}}</span>
                  </p>
              </div>
              <div>
                  <p>
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-zhishichanquanguanli"></use>
                        </svg>
                        <span>{{productDetail.propertyRight}}</span>
                  </p>
                  <p>
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-touzidaren-"></use>
                        </svg>
                        <span>投资房</span>
                  </p>
              </div>
          </div>
          <div class="detailmsg2">
            <p>
               <span>项目地址：</span><span>{{productDetail.address}} </span>
            </p>
            <p>
               <span>交房日期：</span><span>{{productDetail.handingTime}}</span>
            </p>
          </div>
          <div class="detailmsg3">
            <img src="http://img3.tqcaifu.com/img/houseqiandai.png" alt="">
            <div>
              <p>在线预付定金，快人一步锁定优惠和购房资格！</p>
              <p>
                 <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-right-1"></use>
                  </svg>
                  <span>无忧购</span>
                  <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-right-1"></use>
                  </svg>
                  <span>优惠多</span>
                  <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-right-1"></use>
                  </svg>
                  <span>免佣金</span>
              </p>
            </div>
          </div>
           <div class="detailmsg4 box">
              <div class="buttoncell" @click="yuyuezixun">预约咨询</div>
              <div class="phone">
                <p>400-157-0588</p>
                <p>
                  <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-msnui-caller"></use>
                  </svg>
                  <span>24小时咨询热线</span>
                </p>
              </div>

            </div>
        </div>
     </div>

     <div class="msg1 msgbox" v-if="productDetail.info">
        <div class="msgtitle">基本信息</div>
        <div class="content" v-html="productDetail.info"></div>
     </div>
     <div class="msgbox" v-if="productDetail.feature">
        <div class="msgtitle">项目特色</div>
        <div class="content" v-html="productDetail.feature"></div>
     </div>
     <div class="msgbox" v-if="productDetail.investmentAppraisal">
        <div class="msgtitle">投资评估</div>
        <div class="content"  style="width:750px;margin: 0 auto;" v-html="productDetail.investmentAppraisal"></div>
     </div>
     <div class="msgbox" v-if="productDetail.cityInfo">
        <div class="msgtitle">城市概况</div>
        <div class="content chengshigaikuang" v-html="productDetail.cityInfo"></div>
     </div>
  </div>
</template>


<script>
import api from "../../../static/js/api.js";
import asyncApi from "../../../static/js/asyncApi.js";


export default {
  data() {
    return {

    };
  },

  components: {

  },
  methods: {
    yuyuezixun() {
      if (this.$store.state.nologin) {
        this.$alert("请登录后预约！");
      } else {
        api
          .contactUs({
            phone: this.$store.state.userinfo.mobile,
            name: "预约咨询"
          })
          .then(res => {
            if (res.code == 1) {
              this.$alert(res.msg);
            } else {
              this.$alert(res.msg);
            }
          });
      }
    }
  },
  mounted(){

  },
  async asyncData(context) {
    var id = parseInt(context.params.id);
    let [data1] = await Promise.all([
      asyncApi.getHouseDetail({ id: id }),
    ])
    return {
      productDetail: data1.data.data
    };
  },
  head () {
    // return {
    //   title: this.productDetail.name+ "_海外房产_天沁财富",
    //   meta: [
    //      { hid:"keywords",name: 'keywords', content: '海外保险，海外房产，香港重疾险，人寿险，医疗险，储蓄分红险，泰国房产、海外房产投资、海外房产移民' },
    //      { hid:"description",name: 'description',  content: this.productDetail.summary }
    //   ]
    // }
    return {
      title: "海外房产投资平台_海外房产投资_泰国房产_海外房产移民_海外房产网-天沁财富",
      meta: [
        { hid:"keywords",name: 'keywords', content: '海外房产,海外投资,泰国房产,海外房产投资,海外房产移民,海外房产信息,海外房产网' },
        { hid:"description",name: 'description', content: '天沁财富海外房产投资平台，为高净值群体提供全方位的海外房产配置服务，包括泰国房产、印度房产、东欧房产等海外房产投资、海外房产移民。' }
      ]
    }
  }
};
</script>

<style scoped>
.box{
  display: flex;
  justify-content: space-between;
  width: 460px;
  margin: 0 auto;
  padding: 10px 20px;
  box-sizing: border-box;
  border-bottom: 1px dashed #e6e6e6;
}
.main{
  width: 1200px;
  margin: 10px auto;
}
.title{
  padding: 30px 0;
  background: white;
}
.title h1{
  text-align: center;
  font-size: 36px;
  color: #333333;
}
.title p{
  font-size: 24px;
  color: #666666;
  text-align: center;
  margin-top: 20px;
}
.detail{
  display: flex;
  background: white;
  padding: 0 20px 30px;
}
.detailleft{
  width: 640px;
}
.detailleft .mianimg{
  width: 640px;
}
.detailleft .mianimg img{
  height: 100%;
  width: 100%;
}
.detailleft .liuchengtu{
  margin-top: 20px;
  width: 100%;
}
.detailright{
  margin-left: 20px;
  width: 500px;
  border: 1px solid #e6e6e6;
}
.price1{
  width: 100%;
  height: 80px;
  line-height: 80px;
  background: #f44640;
  color: white;
  font-size: 36px;
  text-align: center;
}
.price2{
  padding: 20px;
}
.price2 h2{
  font-size: 18px;
  height: 26px;
  line-height: 26px;
  color: #f44640;
  text-align: center;
}
.price2 p{
  font-size: 14px;
  height: 26px;
  line-height: 26px;
  color: #333333;
  text-align: center;
}
.detailmsg1 div{
  width: 200px;
}
.detailmsg1 p{
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #333333;
}
.detailmsg1 .icon{
  margin-right: 10px;
}
.detailmsg2{
  padding: 20px;
  width: 460px;
  margin: 0 auto;
  box-sizing: border-box;
  border-bottom: 1px solid #e6e6e6;

}
.detailmsg2 p{
  font-size: 16px;
  line-height: 32px;
  color: #333333;
}
.detailmsg2 p span{
  display: inline-block;
  vertical-align: top;
}
.detailmsg2 p span:nth-child(1){
  font-weight: bolder;
}
.detailmsg2 p span:nth-child(2){
  width: 320px;
}
.detailmsg3{
  display: flex;
  width: 460px;
  margin: 0 auto;
  padding: 20px;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px dashed #e6e6e6;
}
.detailmsg3 div{
  margin-left: 20px;
}
.detailmsg3 div p{
  font-size: 16px;
  color: #333333;
  line-height: 32px;
  height: 32px;
}
.detailmsg3 .icon{
  color: #cd9c54;
  margin-right: 4px;
}
.detailmsg3 span{
  margin-right: 30px;
}
.detailmsg4 .buttoncell{
  height: 50px;
  width: 160px;
  text-align: center;
  line-height: 50px;
  border-radius: 4px;
  color: white;
  font-size: 20px;
  background: #cd9c54;
}
.detailmsg4 {
  align-items: center;
}
.detailmsg4 .phone{
  width: 220px;
}
.phone p:nth-child(1){
  height: 36px;
  line-height: 36px;
  font-size: 22px;
  color: #333333;
}
.phone p:nth-child(2){
  height: 24px;
  line-height: 24px;
  font-size: 16px;
  color: #333333;
  font-weight: bolder;
}
.phone p .icon{
  margin-right: 10px;
}
.msg1{
  margin-top: 10px;
}
.msgbox{
  background: white;
  width: 100%;
  display: flex;
  padding: 20px;
  box-sizing: border-box;
}
.msgbox .msgtitle{
  height: 90px;
  width: 70px;
  font-size: 26px;
  color: #fffefe;
  background: #cd9c54;
  text-align: center;
  box-sizing: border-box;
  padding: 6px 4px;
  line-height: 36px;
}
.msgbox .content{
  margin-left: 60px;
  width: 1000px;
  padding: 30px 0;
}
.msgbox .conten p{
  line-height: 2 !important;
  font-size: 18px !important;
  color: #333 !important;
}
</style>
